import React from 'react';
import { Form, Input, Button, message, Space, Row, Col, Alert, RadioChangeEvent } from 'antd';
import { connect, history } from 'umi';
import request from '@/utils/request';
import { ArrowRightOutlined, ArrowLeftOutlined, NotificationOutlined } from '@ant-design/icons';
import weixin_qiye from '@/assets/weixin_qiye.png';

const apiURL = '/api/services/app/AuthCards/';
class AuthPrd extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
      value: 1,
      datas: {},
    };
  }
  formRef: any = React.createRef();
  componentDidMount() {}
  onFinish = (values: any) => {
    this.setState({ loading: true });
    request(apiURL + 'DoAuth', {
      method: 'POST',
      params: values,
    }).then((response) => {
      if (response) {
        if (response.success) {
          if (response.result == 0) message.warning('授权码不存在');
          else if (response.result == 1) message.error('授权密钥错误');
          else if (response.result == 3) message.warning('授权码已使用');
          else message.info('授权成功');
        } else {
          message.error(response.error.message);
        }
        this.setState({ loading: false });
      }
    });
  };
  onChange = (e: RadioChangeEvent) => {
    this.setState({ value: e.target.value });
  };
  logOut = () => {
    this.props.dispatch({
      type: 'login/logout',
    });
  };
  render() {
    const layout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
    };
    return (
      <div>
        <Alert
          message="输入产品授权码进行产品授权或者进云市场购买产品授权。"
          type="warning"
          closable
          showIcon
          icon={<NotificationOutlined />}
          style={{ marginBottom: 8 }}
        />
        <Form {...layout} ref={this.formRef} onFinish={this.onFinish}>
          <Form.Item
            name="cardNo"
            label="授权码"
            rules={[{ required: true, message: '请输入授权码' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="cardPwd"
            label="密钥"
            rules={[{ required: true, message: '请输入授权密钥' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 6 }}>
            <Space>
              <Button type="primary" htmlType="submit" loading={this.state.loading}>
                确定
              </Button>
              <Button type="dashed" onClick={() => this.logOut()} hidden>
                退出登录
              </Button>
              <span>OR</span>
              <Button
                type="link"
                onClick={() => history.push('/Market')}
                icon={<ArrowRightOutlined />}
              >
                去购买产品授权
              </Button>
            </Space>
          </Form.Item>
        </Form>
        <Row gutter={[8, 8]}>
          <Col span={7}>
            <img src={weixin_qiye} width={100} height={100} />
          </Col>
          <Col span={17}>
            <a>
              <ArrowLeftOutlined /> 扫码加微信
            </a>
            <p>
              <b>加微信，客服人员将授权码和密钥发送给您！</b>
              <br />
              客服电话：<b>15961858835</b>
            </p>
          </Col>
        </Row>
      </div>
    );
  }
}
export default connect(({ Abp }: API.IConnectState) => ({
  Abp,
  response: Abp.response,
  currentUser: Abp.currentUser,
}))(AuthPrd);
